@import "../../../css/global";

$rem: 7.5rem / 1125;

.search-bar {
  background: #ffffff;
  border-bottom: 3*$rem solid #dcdcdc;
  .input-text {
    margin: 30 * $rem auto;
    width: 6.5rem;
    height: 108*$rem;
    border-radius: 40*$rem #{'/'} 36*$rem;
    padding: 0 28*$rem 0 40*$rem;
    background: #eeeeee;
    input {
      background: #eeeeee;
      color: #414141;
      font-size:.32rem;
      &::placeholder {
        color: #bebebe;
        font-size:.32rem;
      }
    }
    .icon {
      width: 48*$rem;
      height: 48*$rem;
      margin-left: 30*$rem;
      &.icon-search{
        background: url("../../../img/search.png") center no-repeat;
        background-size: contain;
      }
      &.icon-clean{
        display: none;
        background: url("../../../img/zxd-icon-04@2x.png") center no-repeat;
        background-size: contain;
      }
      &.js_show{
        display: block;
      }
    }
  }
}

.filter-bar {
  background: #ffffff;
  border-bottom: 3*$rem solid #dcdcdc;
  height: 138 *$rem;
  & > div {
    padding: 0 30*$rem;
    span {
      height: 63*$rem;
      max-width: 105*$rem;
      font-size: 45*$rem;
      color: #000000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    div {
      margin-left: 30*$rem;
      width: 30*$rem;
      height: 21*$rem;
      background: url("../../../img/down.png") center no-repeat;
      background-size: contain;
    }
    &.active {
      span {
        color: #ff4014;
        font-size: 45*$rem;
      }
      div {
        background: url("../../../img/up.png") center no-repeat;
        background-size: contain;
      }
    }
  }
}

.filter-panel {
  display: none;
  position: fixed;
  top: 2.08rem;
  bottom: 0;
  left: 0;
  right: 0;
  & > div:nth-child(1) {
    background: #ffffff;
    & > div {
      border-left: 3*$rem solid #dcdcdc;
      &:nth-child(1) {
        border-right: none;
      }
      overflow: scroll;
      ul {
        width: 100%;
        li {
          height: 138 *$rem;
          padding: 0 51*$rem;
          font-size: 45*$rem;
          color: #000000;
          &.active {
            background: #f6f6f6;
            color: #ff4014;
          }
        }
      }
    }
  }
  & > div:nth-child(2) {
    background: rgba(0,0,0,0.3);
    height: 252*$rem;
  }
}

.scroll-container {
  overflow: scroll;
  .scroll-item {
    .list {
      background: #ffffff;
      .banner-bg {
        background: #dfdfdf;
        .banner {
          height: 630 * $rem;
          width: 100%;
          overflow: hidden;
          position: relative;
          background: url("../../../img/default.png") center no-repeat;
          background-size: contain;
          .banList {
            @include full;
            li {
              @include full;
              opacity: 0;
              position: absolute;
              //transform: scale(0);
              //transition: transform 0.5s ease 0s, opacity 1.5s ease 0s;
              z-index: 1;
              &.active {
                opacity: 1;
                //transform: scale(1);
                z-index: 2;
              }
            }
          }
          .fomW {
            position: absolute;
            bottom: 0;
            z-index: 9;
            @include full-width;
            .jsNav {
              text-align: center;
              a {
                display: inline-block;
                background: #fff;
                width: 0.2rem;
                height: 0.04rem;
                margin: 0.2rem 0.06rem;
                &.current {
                  background: #fc8f0f;
                  cursor: pointer
                }
              }
            }
          }
        }
      }
      .item {
        &:nth-child(1) {
          border-top: none;
        }
        padding: 39*$rem;
        border-top: 3*$rem solid #ededed;
        .title {
          font-size: 51*$rem;
          width: 702 * $rem;
          color: #000000;
          span {
            color: rgb(250, 20, 20);
            font-size: 51*$rem;
          }
        }
        .img {
          width: 345*$rem;
          height: 216*$rem;
          margin-right: 0.26rem;
        }
        .author, .date {
          font-size: 36*$rem;
          color: #ababab;
        }
        .author{
          margin-right: .26rem;
        }
      }
    }
  }
}
